<template>
  <div class="wrapper">
    <div class="menuBar">
      <div class="leftBanner">
        <div class="siteLogo"></div>
      </div>
      <div class="tabsWrapper">
        <div @click="tabClick" class="tabs">
          <div data-type="1" class="tabsItem" :class="{ clicked1: tabType === '1' }">工业APP</div>
          <div data-type="2" class="tabsItem" :class="{ clicked2: tabType === '2' }">工业微服务</div>
          <div
            data-type="3" class="tabsItem" :class="{ clicked3: tabType === '3' }" style="border-right:none;">工业机理模型</div>
        </div>
      </div>
      <div class="rightCtrl">
        <!-- <div class="consoleBtn">
          控制台
        </div>-->
<!--        <div style="width"></div>-->
        <el-input placeholder="搜索" @keyup.native.enter="search" v-model="queryKey" v-if="!canShow">
          <i
            slot="suffix"
            style="cursor:pointer"
            class="el-input__icon el-icon-search"
            @click="search"
          ></i>
        </el-input>
        <div class="loginBtnWrapper">
          <div class="avatorWrapper" v-if="isLogin">
            <el-dropdown placement="top">
              <el-avatar style="cursor:pointer;word-break:keep-all">
                <img :src="userAvatar" alt="">
              </el-avatar>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="personalInfo">发布列表</el-dropdown-item>
                <el-dropdown-item @click.native="mySubscribes">我的订阅</el-dropdown-item>
                <el-dropdown-item v-if="isAdmin" @click.native="audit">审核列表</el-dropdown-item>
                <el-dropdown-item @click.native="shelves">上架</el-dropdown-item>
                <el-dropdown-item @click.native="logout">退出</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
            <span style="color:#fff;margin-left:10px;">{{ loginName }}</span>
          </div>
          <div v-else @click="login" class="btn">登录</div>
          <!-- <div class="btn">注册</div> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex'
export default {
  data() {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      radio1: '',
      queryKey: '',
      tabType: ''
    }
  },
  components: {
    // BreadCrumb
  },
  computed: {
    ...mapState({
      isLogin: (state) => state.login.token,
      loginName: (state) => state.login.loginInfo.nickname,
      userAvatar: (state) => state.login.loginInfo.icon ? require(`../assets/avatar/${state.login.loginInfo.icon}.png`) : require('../assets/avatar/24.png'),
      canShow: (state) => state.home.canShow,
      currentTab: (state) => state.home.currentTab,
      isAdmin: (state) =>
        state.login.loginInfo.roleList &&
        state.login.loginInfo.roleList[0].roleCode === '系统管理员'
    })
  },
  created() {
    const token = localStorage.getItem('loginToken')
    this.$store.commit('login/setLoginStatus', { access_token: token })
    this.$store.commit('shelves/setUploadHeader', {
      Authorization: 'Bearer ' + token
    })
    this.tabType = sessionStorage.getItem('currentTab')
    this.getLoginInfo()
  },
  watch: {
    currentTab() {
      this.tabType = sessionStorage.getItem('currentTab')
    }
  },
  methods: {
    ...mapActions({
      getLoginInfo: 'login/getLoginInfo',
      getList: 'home/getList',
      resetStatus: 'home/resetStatus'
    }),
    ...mapMutations({
      setTypeIdAsEmptyStr: 'home/setTypeId'
    }),
    canRoute() {
      const canRouteArr = ['/main/mySubscribes', '/main/personalInfo']
      return !canRouteArr.includes(this.$route.path)
    },
    tabClick(e) {
      this.tabType = e.target.dataset.type
      this.$store.commit('home/setCurrenttab', this.tabType)
      sessionStorage.setItem('currentTab', this.tabType)
      this.$store.commit('home/setPagnation', { pageNum: 1 })
      this.$store.commit('home/setFilterId', {})
      // 切换时清空搜索条件
      this.$store.commit('home/setQuerykey', '')
      this.queryKey = ''
      this.setTypeIdAsEmptyStr()
      this.$router.push({ path: '/main' })
    },
    handleSelect(key, keyPath) {},
    search() {
      if (
        this.queryKey !== this.$store.state.home.queryKey &&
        this.canRoute()
      ) {
        this.$store.commit('home/setQuerykey', this.queryKey)
        this.$store.commit('home/setPagnation', { pageSize: 8, pageNum: 1, total: 0 })
        this.getList()
      }
    },
    login() {
      this.$router.push({ path: '/login' })
    },
    logout() {
      this.$store.commit('login/setLoginStatus', { access_token: '' })
      this.$store.commit('home/setQuerykey', '')
      this.resetStatus()
      setTimeout(() => {
        this.$router.push({ path: '/login' })
      }, 0)
    },
    mySubscribes() {
      this.$router.push('/main/mySubscribes')
    },
    personalInfo() {
      this.$router.push('/main/personalInfo')
    },
    shelves() {
      this.$store.commit('detail/setDetailInfo', {})
      this.$router.push('/main/shelves')
    },
    audit() {
      this.$router.push('/main/audit')
    }
  }
}
</script>
<style lang="scss" scoped>
@mixin center {
  display: flex;
  align-items: center;
}
$borderColor: solid 1px #979797;
@function borderRadius($number) {
  $ret: '';
  @if ($number==1) {
    $ret: 23px 0 0 23px;
  }
  @if ($number==2) {
    $ret: 0 0 0 0;
  }
  @if ($number==3) {
    $ret: 0 23px 23px 0;
  }
  @return $ret;
}
.wrapper {
  .menuBar {
    height: 80px;
    width: 100%;
    background: #232323;
    @include center;
    .leftBanner {
      flex: 1;
      @include center;
      .siteLogo {
        width: 64px;
        height: 64px;
        margin-left: 48px;
        background: no-repeat center url('../assets/site_logo.jpg');
        background-size: contain;
      }
    }
    .tabsWrapper {
      flex: 3;
      display: flex;
      .tabs {
        @include center;
        justify-content: center;
        width: 493px;
        border: $borderColor;
        border-radius: 23px;
        border-right: none;
        height: 46px;
        .tabsItem {
          flex: 1;
          color: #ffffff;
          border-right: $borderColor;
          @include center;
          justify-content: center;
          height: 46px;
          cursor: pointer;
          &.clicked1 {
            background: linear-gradient(to right, #3991fc, #005ef9);
            border-radius: borderRadius(1);
          }
          &.clicked2 {
            background: linear-gradient(to right, #3991fc, #005ef9);
            border-radius: borderRadius(2);
          }
          &.clicked3 {
            background: linear-gradient(to right, #3991fc, #005ef9);
            border-radius: borderRadius(3);
          }
        }
      }
    }
    .rightCtrl {
      flex: 5;
      display: flex;
      justify-content: flex-end;
      @include center;
      .consoleBtn {
        width: 119px;
        height: 35px;
        color: #fff;
        cursor: pointer;
        border: $borderColor;
        @include center;
        justify-content: center;
      }
      .loginBtnWrapper {
        width: 100px;
        margin: 0 50px;
        @include center;
        .btn {
          color: #5ac8fa;
          font-size: 18px;
          padding: 5px 15px;
          &:hover {
            color: #fff;
            border: solid 1px #17caff;
            border-radius: 31px;
            box-shadow: 0 0 4px 0 rgba(121, 228, 255, 1);
            cursor: pointer;
          }
        }
        .avatorWrapper {
          display: flex;
          align-items: center;
        }
      }
    }
  }
}
/deep/ .el-input {
  width: 363px;
  height: 40px;
  input {
    border-radius: 20px;
  }
}
</style>
